<template>
  <div class="shop-container">
    <!-- 搜索区域 -->
    <el-card class="search-card">
      <div class="search-header">
        <div class="header-title">
          <el-icon><Search /></el-icon>
          <span>筛选查询</span>
        </div>
        <div class="header-actions">
          <el-button type="primary" @click="addShop">
            <el-icon><Plus /></el-icon>添加店铺
          </el-button>
        </div>
      </div>

      <el-form :inline="true" :model="data" class="search-form">
        <el-form-item label="店铺名称">
          <el-input
            v-model="data.name"
            placeholder="请输入店铺名称"
            clearable
            @keyup.enter="handleSearch"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">
            <el-icon><Search /></el-icon>查询
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 表格区域 -->
    <el-card class="table-card">
      <el-table
        v-loading="loading"
        :data="shopData"
        border
        stripe
        class="shop-table"
      >
        <el-table-column
          prop="name"
          label="店铺名称"
          min-width="140"
          show-overflow-tooltip
        />
        <el-table-column
          prop="real_name"
          label="法人姓名"
          min-width="100"
          show-overflow-tooltip
        />
        <el-table-column
          prop="pro_num"
          label="商品数量"
          min-width="28"
          show-overflow-tooltip
        />
        <el-table-column prop="su.phone" label="联系电话" width="120" />
        <el-table-column label="状态" width="100" align="center">
          <template #default="{ row }">
            <el-switch
              v-model="row.status"
              :active-value="0"
              :inactive-value="1"
              class="status-switch"
              @change="handleStatusChange(row)"
            />
          </template>
        </el-table-column>
        <el-table-column label="操作" width="240" fixed="right">
          <template #default="{ row }">
            <el-button type="primary" link @click="handleView(row)">
              <el-icon><View /></el-icon>查看
            </el-button>
            <el-button type="primary" link @click="handleEdit(row)">
              <el-icon><Edit /></el-icon>编辑
            </el-button>
            <el-button type="danger" link @click="handleDelete(row)">
              <el-icon><Delete /></el-icon>删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination">
        <el-pagination
          v-model:current-page="data.page"
          v-model:page-size="data.pageSize"
          :total="data.total"
          :page-sizes="[5, 10, 20, 50]"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import {
  Search,
  Plus,
  View,
  Edit,
  Delete,
  Picture
} from "@element-plus/icons-vue";
import { ElMessageBox, ElMessage } from "element-plus";
import { useRouter } from "vue-router";
import { getShopList, deleteShop, updateShopStatus } from "@/api/shop/shop.js";

const router = useRouter();
const loading = ref(false);
const shopData = ref([]);
const data = ref({
  name: "",
  page: 1,
  pageSize: 5,
  total: 0
});

// 获取店铺列表
const getShops = async () => {
  loading.value = true;
  try {
    const res = await getShopList(data.value);
    if (res.code === 200) {
      console.log(res.data.list);
      shopData.value = res.data.list;
      data.value.total = res.data.total;
    }
  } catch (error) {
    console.error("获取店铺列表失败:", error);
    ElMessage.error("获取店铺列表失败");
  } finally {
    loading.value = false;
  }
};

// 获取身份证图片数组
const getIdCardImages = su => {
  return {
    正面: su.id_card_a,
    反面: su.id_card_b,
    手持: su.id_card_c
  };
};

// 搜索
const handleSearch = () => {
  getShops();
};

// 分页
const handleSizeChange = val => {
  data.value.pageSize = val;
  getShops();
};

const handleCurrentChange = val => {
  data.value.page = val;
  getShops();
};

// 添加店铺
const addShop = () => {
  router.push("/shop/shopAdd");
};

// 查看店铺
const handleView = row => {
  // TODO: 实现查看功能
};

// 编辑店铺
const handleEdit = row => {
  // TODO: 实现编辑功能
};

// 删除店铺
const handleDelete = row => {
  ElMessageBox.confirm("确定要删除该店铺吗？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning"
  }).then(async () => {
    try {
      const res = await deleteShop(row.id);
      if (res.code === 200) {
        ElMessage.success("删除成功");
        getShops();
      }
    } catch (error) {
      ElMessage.error("删除失败");
    }
  });
};

// 更新店铺状态
const handleStatusChange = async row => {
  let res = updateShopStatus({ id: row.id, status: row.status });
  if (res.code == 200) {
    ElMessage.success("修改成功");
  } else {
    ElMessage.error("修改失败");
  }
};

onMounted(() => {
  getShops();
});
</script>

<style scoped>
.shop-container {
  padding: 20px;
}

.search-card {
  margin-bottom: 20px;
}

.search-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.header-title {
  display: flex;
  align-items: center;
  font-size: 16px;
  font-weight: 500;
}

.header-title .el-icon {
  margin-right: 8px;
  font-size: 18px;
}

.search-form {
  margin-top: 20px;
}

.shop-table {
  margin-top: 20px;
}

.id-images {
  display: flex;
  gap: 8px;
}

.id-image {
  width: 60px;
  height: 60px;
  border-radius: 4px;
  cursor: pointer;
  transition: transform 0.3s;
}

.id-image:hover {
  transform: scale(1.05);
}

.image-error {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f5f7fa;
  color: #909399;
}

.status-switch {
  --el-switch-on-color: #13ce66;
  --el-switch-off-color: #ff4949;
}

:deep(.el-table) {
  border-radius: 8px;
  overflow: hidden;
}

:deep(.el-table th) {
  background-color: #f5f7fa;
  color: #606266;
  font-weight: 500;
  padding: 12px 0;
}

:deep(.el-table td) {
  padding: 12px 0;
}

:deep(.el-table--striped .el-table__body tr.el-table__row--striped td) {
  background: #fafafa;
}

:deep(.el-table__body tr:hover td) {
  background-color: #f5f7fa !important;
}

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
  padding: 0 20px;
}

:deep(.el-button.is-link) {
  padding: 4px 8px;
  font-size: 13px;
}

:deep(.el-button.is-link) .el-icon {
  margin-right: 4px;
  font-size: 14px;
}

:deep(.el-button.is-link:not(.is-disabled):hover) {
  color: #66b1ff;
}

:deep(.el-button.is-link.el-button--danger:not(.is-disabled):hover) {
  color: #ff7875;
}
</style>
